<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="close" width="750px">
      <el-card class="check-progress">
        <el-steps :active="progressStep" finish-status="success">
          <el-step title="开发负责人" />
          <el-step title="运维管理员" />
          <el-step title="IT负责人" />
        </el-steps>
        <!--      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
        <!--      <el-progress type="circle" :percentage="95" :width="80"></el-progress>-->
      </el-card>
      <el-table
        ref="table"
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
      >
        <el-table-column
          prop="first"
          label="第一负责人"
          width="100"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.first">已完成</el-tag>
            <el-tag v-else type="warning">进行中</el-tag>
          </template>

        </el-table-column>

        <el-table-column
          prop="second"
          label="第二负责人"
          width="100"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.second">已完成</el-tag>
            <el-tag v-else type="warning">进行中</el-tag>
          </template>

        </el-table-column>

        <el-table-column
          prop="third"
          label="第三负责人"
          width="100"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.third">已完成</el-tag>
            <el-tag v-else type="warning">进行中</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="confirm"
          label="审批确认"
        >
          <template slot-scope="{row}">
            <el-button :disabled="row.first" type="primary" size="mini" @click="confirmDiaLog(row,'first')">开发负责人</el-button>
            <!--          <el-button  type="primary"  size="mini"  @click="checkApproveFirst(row)">开发负责人</el-button>-->
            <el-button :disabled="row.second" type="warning" size="mini" @click="confirmDiaLog(row,'second')">运维管理员</el-button>
            <!--            <el-button :disabled="row.second"  type="warning"  size="mini"  @click="checkApproveSecond(row)">运维管理员</el-button>-->
            <!--            <el-button :disabled="row.third"  type="success"  size="mini"  @click="checkApproveThird(row)">IT负责人</el-button>-->
            <el-button :disabled="row.third" type="success" size="mini" @click="confirmDiaLog(row,'third')">IT负责人</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="confirmDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>审批内容已经核实无问题后，请点击确认</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmStep()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getConfirmApprove, updateConfirmApprove } from '@/api/approve/confirm'
import { updateApprove } from '@/api/approve/apply'
export default {
  name: 'CheckProgress',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },

    instanceId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableData: [],
      progressStep: 0,
      confirmDialogVisible: false,
      confirmCurrentRow: {},
      confirmCurrentStep: null
    }
  },
  watch: {

  },
  mounted() {
    this.calculateConfirmApprove(this.instanceId)
  },
  created() {

  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    checkConfirmcomplete(instance_id, confirm_id, current_step) {
      const progress_step = current_step
      console.log('progress_step', progress_step)
      const check_data = {}
      check_data[progress_step] = 1
      console.log('check_data', check_data)
      if (progress_step === 'first'){
        updateConfirmApprove(confirm_id, check_data).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '确认成功',
              type: 'success'
            })
            this.calculateConfirmApprove(instance_id)
          }
        })
      }
      else if (progress_step === 'second') {
        getConfirmApprove(instance_id).then(res => {
          const res_data = res.data
          if (!res_data['first']) {
            this.$message({
              message: '请确认前面的审批步骤已经完成',
              type: 'warning'
            })
          } else {
            updateConfirmApprove(confirm_id, check_data).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '确认成功',
                  type: 'success'
                })
                this.calculateConfirmApprove(instance_id)
              }
            })
          }
        })
      } else if (progress_step === 'third') {
        console.log('third')
        getConfirmApprove(instance_id).then(res => {
          const res_data = res.data
          if (!res_data['first'] || !res_data['second']) {
            this.$message({
              message: '请确认前面的审批步骤已经完成',
              type: 'warning'
            })
          } else {
            check_data['end'] = 1
            const update_instance_data = { 'approve_check': 1 }
            updateConfirmApprove(confirm_id, check_data).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '确认成功',
                  type: 'success'
                })
                this.calculateConfirmApprove(instance_id)
                updateApprove(instance_id, update_instance_data).then(res => {
                  console.log('update instance approve')
                  this.getApproveInstanceData()
                })
              }
            })
          }
        })
      }
    },
    calculateConfirmApprove(id) {
      this.progressStep = 0
      getConfirmApprove(id).then(res => {
        const data_t = [res.data]
        this.tableData = data_t
        if (res.data.first) {
          this.progressStep++
        }
        if (res.data.second) {
          this.progressStep++
        }
        if (res.data.third) {
          this.progressStep++
        }
      })
    },
    getApproveInstanceData() {
      this.$emit('getApproveInstanceData')
    },
    close() {
      this.$emit('close')
      this.progressStep = 0
    },


    confirmDiaLog(row, currentStep) {
      this.confirmDialogVisible = true
      const currentRow = row
      const step = currentStep
      this.confirmCurrentRow = currentRow
      this.confirmCurrentStep = step
    },
    confirmStep() {
      const row = this.confirmCurrentRow
      const current_step = this.confirmCurrentStep
      console.log(row)
      console.log(current_step)
      this.checkConfirmcomplete(this.instanceId, row.id, current_step)
      this.confirmCurrentRow = {}
      this.confirmCurrentStep = null
      this.confirmDialogVisible = false
    }

  }
}
</script>

<style scoped>

</style>
